<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软件升级流程图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #2c3e50;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin: 20px 0;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            border-radius: 10px;
        }
        
        h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .description {
            font-size: 18px;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.5;
        }
        
        .flow-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            background: #3498db;
            color: white;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn-download {
            background: #2ecc71;
        }
        
        .btn-print {
            background: #9b59b6;
        }
        
        .svg-container {
            width: 100%;
            overflow: auto;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background: white;
            padding: 20px;
        }
        
        svg {
            display: block;
            margin: 0 auto;
        }
        
        .step {
            stroke: #2c3e50;
            stroke-width: 2;
            fill: white;
            rx: 10;
            ry: 10;
        }
        
        .decision {
            stroke: #2c3e50;
            stroke-width: 2;
            fill: white;
        }
        
        .start-end {
            stroke: #2c3e50;
            stroke-width: 2;
            fill: #3498db;
        }
        
        .connector {
            stroke: #3498db;
            stroke-width: 2;
            fill: none;
        }
        
        .arrow {
            stroke: #3498db;
            stroke-width: 2;
            fill: #3498db;
        }
        
        .text {
            font-size: 14px;
            fill: #2c3e50;
            text-anchor: middle;
        }
        
        .small-text {
            font-size: 12px;
            fill: #7f8c8d;
        }
        
        .note {
            font-size: 12px;
            fill: #e74c3c;
            font-style: italic;
        }
        
        .highlight {
            stroke: #e74c3c;
            stroke-width: 3;
            fill: none;
            rx: 10;
            ry: 10;
        }
        
        .status {
            font-size: 12px;
            fill: #27ae60;
            font-weight: 500;
        }
        
        .status-failed {
            fill: #e74c3c;
        }
        
        .status-warning {
            fill: #f39c12;
        }
        
        footer {
            text-align: center;
            margin-top: 20px;
            color: #7f8c8d;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>软件升级流程图</h1>
            <p class="description">可视化展示软件自动升级的完整过程与状态变化</p>
        </header>
        
        <div class="flow-controls">
            <button onclick="zoomIn()">放大</button>
            <button onclick="zoomOut()">缩小</button>
            <button onclick="resetView()">重置视图</button>
            <button class="btn-download" onclick="downloadSVG()">下载SVG</button>
            <button class="btn-print" onclick="window.print()">打印</button>
        </div>
        
        <div class="svg-container">
            <svg id="flowchart" width="1100" height="2200" viewBox="0 0 1100 2200">
                <!-- 流程图内容 -->
                <defs>
                    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                        <polygon points="0 0, 10 3.5, 0 7" fill="#3498db"/>
                    </marker>
                </defs>
                
                <!-- 开始 -->
                <ellipse cx="550" cy="50" rx="80" ry="40" class="start-end"/>
                <text x="550" y="55" class="text">开始升级流程</text>
                
                <!-- 步骤1 -->
                <rect x="450" y="100" width="200" height="60" class="step"/>
                <text x="550" y="120" class="text">1. 启动升级程序</text>
                <text x="550" y="140" class="small-text">初始化状态: Starting</text>
                
                <path d="M550 90L550 100" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 步骤2 -->
                <rect x="450" y="180" width="200" height="60" class="step"/>
                <text x="550" y="200" class="text">2. 获取版本配置</text>
                <text x="550" y="220" class="small-text">从服务器获取Upgrade.ini</text>
                
                <path d="M550 160L550 180" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 决策点1: 获取配置是否成功 -->
                <path d="M500 260L600 260L550 320L500 260" class="decision"/>
                <text x="550" y="280" class="text">获取成功?</text>
                
                <path d="M550 240L550 260" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 失败分支 -->
                <path d="M500 260L400 320L400 450L450 450" class="connector"/>
                <text x="380" y="350" class="text">否</text>
                
                <rect x="350" y="450" width="200" height="60" class="step"/>
                <text x="450" y="470" class="text">3. 获取失败处理</text>
                <text x="450" y="490" class="status status-failed">PreUpgradeFailed</text>
                
                <path d="M450 510L450 550" class="connector" marker-end="url(#arrowhead)"/>
                
                <rect x="400" y="550" width="100" height="40" class="step"/>
                <text x="450" y="575" class="text">退出程序</text>
                
                <!-- 成功分支 -->
                <path d="M600 260L700 320L700 380L650 380" class="connector"/>
                <text x="720" y="350" class="text">是</text>
                
                <rect x="650" y="380" width="200" height="60" class="step"/>
                <text x="750" y="400" class="text">4. 获取成功</text>
                <text x="750" y="420" class="status">PreUpgradeSuccess</text>
                
                <path d="M750 440L750 480" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 步骤5 -->
                <rect x="650" y="480" width="200" height="60" class="step"/>
                <text x="750" y="500" class="text">5. 解析配置文件</text>
                <text x="750" y="520" class="small-text">解析Upgrade.ini</text>
                
                <path d="M750 540L750 580" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 决策点2: 解析是否成功 -->
                <path d="M700 580L800 580L750 640L700 580" class="decision"/>
                <text x="750" y="600" class="text">解析成功?</text>
                
                <!-- 失败分支 -->
                <path d="M700 580L600 640L600 710L650 710" class="connector"/>
                <text x="580" y="670" class="text">否</text>
                
                <rect x="650" y="710" width="200" height="60" class="step"/>
                <text x="750" y="730" class="text">解析失败</text>
                <text x="750" y="750" class="status status-failed">PreUpgradeVersionFailed</text>
                
                <path d="M750 770L750 810" class="connector" marker-end="url(#arrowhead)"/>
                
                <rect x="700" y="810" width="100" height="40" class="step"/>
                <text x="750" y="835" class="text">退出程序</text>
                
                <!-- 成功分支 -->
                <path d="M800 580L900 640L900 710L750 710" class="connector"/>
                <text x="920" y="670" class="text">是</text>
                
                <!-- 步骤6 -->
                <rect x="650" y="710" width="200" height="60" class="step"/>
                <text x="750" y="730" class="text">6. 版本比对</text>
                <text x="750" y="750" class="small-text">比较服务器与本地版本</text>
                
                <path d="M750 770L750 810" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 决策点3: 版本是否相同 -->
                <path d="M700 810L800 810L750 870L700 810" class="decision"/>
                <text x="750" y="830" class="text">版本相同?</text>
                
                <!-- 相同分支 -->
                <path d="M700 810L600 870L600 950L650 950" class="connector"/>
                <text x="580" y="900" class="text">是</text>
                
                <rect x="650" y="950" width="200" height="60" class="step"/>
                <text x="750" y="970" class="text">7. 版本相同</text>
                <text x="750" y="990" class="status status-warning">PreUpgradeVersionEqual</text>
                
                <path d="M750 1010L750 1050" class="connector" marker-end="url(#arrowhead)"/>
                
                <rect x="700" y="1050" width="100" height="40" class="step"/>
                <text x="750" y="1075" class="text">退出程序</text>
                
                <!-- 不同分支 -->
                <path d="M800 810L900 870L900 950L750 950" class="connector"/>
                <text x="920" y="900" class="text">否</text>
                
                <!-- 步骤8 -->
                <rect x="650" y="950" width="200" height="60" class="step"/>
                <text x="750" y="970" class="text">8. 准备下载</text>
                <text x="750" y="990" class="small-text">获取UpgradeFileUrl</text>
                
                <path d="M750 1010L750 1050" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 决策点4: 下载方式 -->
                <path d="M700 1050L800 1050L750 1110L700 1050" class="decision"/>
                <text x="750" y="1070" class="text">下载方式?</text>
                
                <!-- HTTP下载 -->
                <path d="M700 1050L600 1110L600 1180L650 1180" class="connector"/>
                <text x="580" y="1150" class="text">HTTP</text>
                
                <rect x="650" y="1180" width="200" height="60" class="step"/>
                <text x="750" y="1200" class="text">9. HTTP下载</text>
                <text x="750" y="1220" class="status">Downloading</text>
                
                <!-- FTP下载 -->
                <path d="M800 1050L900 1110L900 1180L750 1180" class="connector"/>
                <text x="920" y="1150" class="text">FTP</text>
                
                <rect x="650" y="1180" width="200" height="60" class="step"/>
                <text x="750" y="1200" class="text">10. FTP下载</text>
                <text x="750" y="1220" class="status">Downloading</text>
                
                <path d="M750 1240L750 1280" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 步骤11 -->
                <rect x="650" y="1280" width="200" height="60" class="step"/>
                <text x="750" y="1300" class="text">11. 完整性校验</text>
                <text x="750" y="1320" class="small-text">验证MD5校验和</text>
                
                <path d="M750 1340L750 1380" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 决策点5: 校验是否成功 -->
                <path d="M700 1380L800 1380L750 1440L700 1380" class="decision"/>
                <text x="750" y="1400" class="text">校验成功?</text>
                
                <!-- 失败分支 -->
                <path d="M700 1380L600 1440L600 1510L650 1510" class="connector"/>
                <text x="580" y="1480" class="text">否</text>
                
                <rect x="650" y="1510" width="200" height="60" class="step"/>
                <text x="750" y="1530" class="text">12. 校验失败</text>
                <text x="750" y="1550" class="status status-failed">DownloadRetry/Failed</text>
                
                <!-- 成功分支 -->
                <path d="M800 1380L900 1440L900 1510L750 1510" class="connector"/>
                <text x="920" y="1480" class="text">是</text>
                
                <!-- 步骤13 -->
                <rect x="650" y="1510" width="200" height="60" class="step"/>
                <text x="750" y="1530" class="text">13. 校验成功</text>
                <text x="750" y="1550" class="status">DownloadSuccess</text>
                
                <path d="M750 1570L750 1610" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 步骤14 -->
                <rect x="650" y="1610" width="200" height="60" class="step"/>
                <text x="750" y="1630" class="text">14. 检查强制升级</text>
                <text x="750" y="1650" class="small-text">检查ForceUpgrade字段</text>
                
                <path d="M750 1670L750 1710" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 决策点6: 是否强制升级 -->
                <path d="M700 1710L800 1710L750 1770L700 1710" class="decision"/>
                <text x="750" y="1730" class="text">ForceUpgrade?</text>
                
                <!-- 强制升级分支 -->
                <path d="M700 1710L600 1770L600 1840L650 1840" class="connector"/>
                <text x="580" y="1810" class="text">是</text>
                
                <rect x="650" y="1840" width="200" height="60" class="step"/>
                <text x="750" y="1860" class="text">15. 强制升级</text>
                <text x="750" y="1880" class="status">Upgrading</text>
                
                <!-- 非强制升级分支 -->
                <path d="M800 1710L900 1770L900 1840L750 1840" class="connector"/>
                <text x="920" y="1810" class="text">否</text>
                
                <rect x="650" y="1840" width="200" height="60" class="step"/>
                <text x="750" y="1860" class="text">16. 非强制升级</text>
                <text x="750" y="1880" class="status status-warning">UpgradeDelay</text>
                
                <path d="M750 1900L750 1940" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 步骤17 -->
                <rect x="650" y="1940" width="200" height="60" class="step"/>
                <text x="750" y="1960" class="text">17. 安装失败处理</text>
                <text x="750" y="1980" class="status status-failed">UpgradeFailed</text>
                
                <path d="M750 2000L750 2040" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 步骤18 -->
                <rect x="650" y="2040" width="200" height="60" class="step"/>
                <text x="750" y="2060" class="text">18. 安装成功</text>
                <text x="750" y="2080" class="status">UpgradeSuccess</text>
                
                <path d="M750 2100L750 2140" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 决策点7: 是否强制重启 -->
                <path d="M700 2140L800 2140L750 2200L700 2140" class="decision"/>
                <text x="750" y="2160" class="text">ForceSystemRestart?</text>
                
                <!-- 强制重启分支 -->
                <path d="M700 2140L600 2200L600 2270L650 2270" class="connector"/>
                <text x="580" y="2240" class="text">是</text>
                
                <rect x="650" y="2270" width="200" height="60" class="step"/>
                <text x="750" y="2290" class="text">19. 强制重启系统</text>
                
                <!-- 不强制重启分支 -->
                <path d="M800 2140L900 2200L900 2270L750 2270" class="connector"/>
                <text x="920" y="2240" class="text">否</text>
                
                <rect x="650" y="2270" width="200" height="60" class="step"/>
                <text x="750" y="2290" class="text">20. 重启服务</text>
                
                <path d="M750 2330L750 2370" class="connector" marker-end="url(#arrowhead)"/>
                
                <!-- 结束 -->
                <ellipse cx="550" cy="2420" rx="80" ry="40" class="start-end"/>
                <text x="550" y="2425" class="text">升级完成</text>
                
                <!-- 高亮当前步骤 -->
                <rect x="445" y="95" width="210" height="70" class="highlight" id="highlight"/>
            </svg>
        </div>
        
        <footer>
            <p>软件升级流程示意图 | 基于需求文档生成</p>
        </footer>
    </div>

    <script>
        let currentStep = 0;
        const steps = [
            {x: 445, y: 95, width: 210, height: 70}, // 步骤1
            {x: 445, y: 175, width: 210, height: 70}, // 步骤2
            // 可以继续添加其他步骤的坐标...
        ];
        
        function zoomIn() {
            const svg = document.getElementById('flowchart');
            const viewBox = svg.getAttribute('viewBox').split(' ').map(Number);
            viewBox[2] *= 0.8;
            viewBox[3] *= 0.8;
            svg.setAttribute('viewBox', viewBox.join(' '));
        }
        
        function zoomOut() {
            const svg = document.getElementById('flowchart');
            const viewBox = svg.getAttribute('viewBox').split(' ').map(Number);
            viewBox[2] *= 1.2;
            viewBox[3] *= 1.2;
            svg.setAttribute('viewBox', viewBox.join(' '));
        }
        
        function resetView() {
            document.getElementById('flowchart').setAttribute('viewBox', '0 0 1100 2200');
        }
        
        function downloadSVG() {
            const svg = document.getElementById('flowchart');
            const svgData = new XMLSerializer().serializeToString(svg);
            const blob = new Blob([svgData], {type: 'image/svg+xml'});
            const url = URL.createObjectURL(blob);
            
            const link = document.createElement('a');
            link.href = url;
            link.download = 'software-upgrade-flowchart.svg';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        
        // 演示流程步骤高亮
        function demoSteps() {
            const highlight = document.getElementById('highlight');
            if (currentStep < steps.length) {
                const step = steps[currentStep];
                highlight.setAttribute('x', step.x);
                highlight.setAttribute('y', step.y);
                highlight.setAttribute('width', step.width);
                highlight.setAttribute('height', step.height);
                
                currentStep = (currentStep + 1) % steps.length;
                setTimeout(demoSteps, 1000);
            }
        }
        
        // 开始演示
        setTimeout(demoSteps, 1000);
    </script>
</body>
</html>